<template>
    <div :class="mainClassValue" @click.stop="elClick">
        <div :class="classValue">
            <div class="top-info">
                <div class="integral-mode-name">{{nameValue}}</div>
                <div class="integral-count" v-html="showValue"></div>
            </div>
            <div class="integral-tip-info">{{tipInfo}}</div>
        </div>
        <div class="integral-value" v-if="showFooter">
            <div class="integral-count">{{name}}</div>
            <div class="integral-price">{{price}}积分</div>
        </div>
    </div>
</template>

<script>
import { COUPONS_TYPE_MODE, COUPONS_TYPE } from '@constants/coupons';
export default {
    name: 'IntegralItem', // 积分兑换item
    props: {
        name: {
            type: String,
            default: '',
        },
        mode: {
            type: String,
            default: 'red', // red gold gray
        },
        price: {
            type: Number,
            default: 0,
        },
        coupon: {
            type: Object,
            default() {
                return {
                    mode: '',
                    name: '',
                    price: '',
                    quota: 0,
                    day: 0,
                };
            },
        },
        fixedWidth: { // 是否是固定宽度，默认固定，不是自动适应父元素宽度
            type: Boolean,
            default: true,
        },
        size: {
            type: String,
            default: 'normal', // normal small
        },
        showFooter: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        mainClassValue() {
            const { fixedWidth, size } = this.$props;
            return `tech-integral-item ${fixedWidth ? 'is-fixed-width' : ''} item-size-${size}`;
        },
        classValue() {
            const { coupon, fixedWidth } = this.$props;
            return `integral-content integral-mode-${coupon.mode} ${fixedWidth ? 'is-fixed-width' : ''}`;
        },
        nameValue() {
            const { mode } = this.$props.coupon;
            return COUPONS_TYPE[mode];
        },
        showValue() {
            const { mode, price } = this.$props.coupon;
            switch(mode) {
            case 'discount':
                return `<span>${price * 10}</span>折`;
            default:
                return `￥<span>${price}</span>`;
            }
        },
        tipInfo() {
            const { mode, quota, day } = this.$props.coupon;
            switch(mode) {
            case 'voucher':
                return quota > 0 ? `满${quota}可用` : '无门槛';
            case 'cut':
                return quota > 0 ? `满${quota}立减` : '无门槛';
            case 'limit':
                return `有效期${day}天`;
            case 'discount':
                return `有效期${day}天`;
            default:
                return quota > 0 ? `满${quota}可用` : '无门槛';
            }
        },
    },
    methods: {
        elClick() {
            this.$emit('click');
        },
    },
};
</script>

<style lang="less">
@length: 90px;
@length-small: 70px;
.tech-integral-item {
    width: 100%;
    display: inline-block;
    &.is-fixed-width {
        width: @length;
    }
    &.item-size-small {
        width: @length-small;
        .integral-content.is-fixed-width {
            width: @length-small;
        }

    }
    .integral-content {
        height: @length;
        border-radius: @border-radius;
        color: @white;
        position: relative;
        .flex-column-center();
        &.is-fixed-width {
            width: @length;
        }
        .integral-mode-name,
        .integral-tip-info {
            font-size: @font-size-mini;
            opacity: .7;
        }
        .integral-count {
            font-size: @font-size-mini;
            > span {
                font-size: @font-size-md;
            }
        }
        .top-info {
            flex: 1;
            .flex-column-center();
        }
        .integral-mode-name {
            .m-b(@gap-sm);
        }
        .integral-tip-info {
            width: 100%;
            height: 30px;
            .t-c();
            line-height: 30px;
            border-top: 1px dashed @border-color;
        }
        &::before, &::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: @white;
            bottom: 27px;
            left: -3px;
            border-radius: 6px;
        }
        &::after {
            right: -3px;
            left: auto;
        }
        &.integral-mode {
            &-voucher {
                .linear-bottom(#FF6B66, #F33931);
            }
            &-discount {
                .linear-bottom(#5F81EB, #315BD3);
            }
            &-limit {
                .linear-bottom(#EDCB8E, #D3AE68);
            }
            &-cut {
                .linear-bottom(#CEBCB1, #A98F7F);
            }
        }
    }
    .integral-value {
        .flex-column-center();
        .m-t(@gap);
        .integral-count {
            .font-size();
            .text-overflow();
            max-width: 70px;
        }
        .integral-price {
            .font-size-sm();
            color: #D6AF66;
        }
    }
}
</style>
